import React from 'react';
import './app.css';
import { Layout } from 'antd';
import Picker from './panel/Picker';
import Canvas from './panel/Canvas';
import PropsEditor from './panel/PropsEditor';
import Toolbar from './panel/Toolbar';
import { picker } from './panel/Picker/config';
import './demoPlugins';

const { Header, Sider, Footer, Content } = Layout;

function App() {
    return (
        <Layout className="app">
            <Header>
                <Toolbar />
            </Header>
            <Layout>
                <Sider style={{ overflow: 'auto' }}>
                    <Picker />
                </Sider>
                <Content>
                    <Canvas />
                </Content>
                <Sider>
                    <PropsEditor />
                </Sider>
            </Layout>
            <Footer>footer</Footer>
        </Layout>
    );
}

export default App;

App.use = picker.use;
